<template>
  <div>
    <div class="title">
      <h1>防污措施</h1>
    </div>
    <div class="content">

      <el-form ref="form" :model="form" label-width="200px">
        <el-col :span="8"><div class="grid-content bg-purple">排入水中的化学物质</div></el-col>
        <br>
        <br>
        <el-form-item
          label="措施效率："
          style="width: 600px;font-size: 8ex"
          prop="waterFwcs"
          :rules="[
            {required: true, message: '措施效率不能为空',trigger: 'blur' }
          ]"
        >
          <el-input v-model="form.waterFwcs" style="width: 100%;" placeholder="请输入内容(0~1范围内)">
            <template slot="append">（百分比请换算成小数填入）</template>
          </el-input>
        </el-form-item>
        <el-col :span="8"><div class="grid-content bg-purple">排入大气中的化学物质</div></el-col>
        <br>
        <br>

        <el-form-item
          label="措施效率："
          style="width: 600px;font-size: 8ex"
          prop="airFwcs"
          :rules="[{required: true, message: '措施效率不能为空',trigger: 'blur' }]"
        >
          <el-input v-model="form.airFwcs" style="width: 100%;" placeholder="请输入内容(0~1范围内)">
            <template slot="append">（百分比请换算成小数填入）</template>
          </el-input>
        </el-form-item>

      </el-form>

      <br>
      <br>
      <el-button style="margin-top: 12px;" @click="goBack">上一步</el-button>
      <el-button style="margin-top: 12px;" @click="sendAntifoulingMeasure">计算</el-button>
    </div>

  </div>

</template>

<script>
import DirectUsage from './UsageParameters/DirectUsage'
import IndirectUsage from './UsageParameters/IndirectUsage'
import BaseInformation from './BaseInformation'
export default {
  name: 'AntifoulingMeasure',
  components: {
    DirectUsage,
    IndirectUsage

  },
  data() {
    return {
      form: {
        waterFwcs: '',
        airFwcs: ''
      }
    }
  },
  watch: { // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
    'form.waterFwcs': function(newVal, oldValue) {
      if (parseFloat(newVal) < 0 || parseFloat(newVal) > 1) {
        this.form.waterFwcs = ''
        this.$message({
          message: '数值只能在0-1之间',
          type: 'warning'
        })
      }
    },
    'form.airFwcs': function(newVal, oldValue) {
      if (parseFloat(newVal) < 0 || parseFloat(newVal) > 1) {
        this.form.airFwcs = ''
        this.$message({
          message: '数值只能在0-1之间',
          type: 'warning'
        })
      }
    }
  },
  methods: {
    goBack() {
      this.$emit('goBack')
    },
    sendAntifoulingMeasure() {
      if (this.form.waterFwcs != '') {
        if (this.form.airFwcs != '') {
          // let flag = {flag:'1'};
          const antifoulingMeasure = { waterFwcs: this.form.waterFwcs, airFwcs: this.form.airFwcs }
          this.$store.commit('setAntifoulingMeasure', antifoulingMeasure)
          this.$emit('listenChild')
        } else {
          this.$message('废气防污措施不能为空，没有则填0')
        }
      } else {
        this.$message('废水防污措施不能为空，没有则填0')
      }
    }

  }
}
</script>

<style scoped lang="scss">
  .title{
    position:absolute;
    left:0px;
  }
  .content{
    position:absolute;
    top:100px;
    left:20%;
    right:25%;
  }
</style>
